import Head from "next/head";
import Link from "next/link";
import { Box, Heading, Text, Button } from '@chakra-ui/react';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { Carousel } from 'react-responsive-carousel';
import { baseURL } from '../axiosConfig';
import axios from 'axios';

const swiperContainer = css`
  position: relative;
  & > .carousel:last-child {
    position: absolute;
    left: 0;
    bottom: 0;
    & > .thumbs-wrapper > .thumbs {
      display: flex;
      justify-content: center;
    }
  }
`;

const CarouselItem = styled.div`
  position: relative;
  & > div {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%);
    width: 100%;
    max-width: 1200px;
    padding-top: 180px;
    text-align: left;
    color: #fff;
    & > p {
      margin: 15px 0;
      font-size: 14px;
      width: 450px;
    }
  }
  & > img {
    filter: brightness(50%);
  }
`;

export default function Swiper({ data }) {
  return (
    <>
      <Head>
        <link rel="stylesheet" href="/styles/carousel.min.css" />
      </Head>
      <Carousel className="1231" css={swiperContainer} showArrows={false} showStatus={false} showIndicators={false}>
        {
          data.map(item => (
            <CarouselItem key={item.id}>
              <img src={item.url} />
              <Box>
                <Heading as="h2" size="lg">
                  {item.title}
                </Heading>
                <Text>
                  {item.description}
                </Text>
                <Link href="/detail/[id]" as={`/detail/${item.vid}`}>
                  <Button colorScheme="red">CHECK DETAIL</Button>
                </Link>
              </Box>
            </CarouselItem>
          ))
        }
      </Carousel>
    </>
  );
}

export const loadSwiper = () => {
  return axios.get('/api/swiper', { baseURL });
}